<template>
	<view>
		<uni-section backgroundColor="#FA8C16">
			<view class="uni-nav-bar" slot='navbar'>
				<view class="navBar">
					<view class="container">
						<view class="pointer">
							<image src="../../static/index_menu_images/箭头.png" @click="returnOldPage" mode=""></image>
						</view>
						<view><text>{{title[parseInt(this.Option) - 1]}}</text></view>
						<view></view>
					</view>
				</view>
			</view>
		</uni-section>
		<view style="height: 200rpx;width: 100%;position: fixed;background-color: #FA8C16;"></view>
		<scroll-view scroll-top="96" style="height: 1400rpx;" scroll-y="true" @scroll="scroll">
			<view class="top-container">
				<view class="top-logs">
					<view v-if="Option == 1" class="waimai">
						<image style="width: 576rpx;" src="../../static/index_menu_images/waimaiText.png"
							mode="widthFix"></image>
						<image style="width: 88rpx;" src="../../static/index_menu_images/moto.png" mode="widthFix">
						</image>
					</view>
					<view v-if="Option == 2" class="daodian">
						<image style="width: 576rpx;" src="../../static/index_menu_images/daodianText.png"
							mode="widthFix"></image>
						<image style="width:88rpx; " src="../../static/index_menu_images/daodian.png" mode="widthFix">
						</image>
					</view>
					<view v-if="Option == 3" class="shunfeng">
						<image style="width:576rpx;" src="../../static/index_menu_images/shunfengText.png"
							mode="widthFix"></image>
						<image style="width: 88rpx;" src="../../static/index_menu_images/shunfeng.png" mode="widthFix">
						</image>
					</view>
				</view>
				<view>
					<uni-search-bar radius="48" cancelButton="none" bgColor="#F5F5F5" placeholder='想它却找不到，没关系，直接搜一搜~'>
					</uni-search-bar>
				</view>
				<view class="category">
					<view v-for="item in categores" :key="item.id" class="single-kind">
						<image :src="item.active === 1?item.image2:item.image1" @click="active(item.id)"
							mode="widthFix"></image>
						<view class="id"><text>{{item.title}}</text></view>
					</view>
				</view>
				<view class="container">
					<view class="uni-px-5">
						<uni-data-checkbox mode="tag" max=4 selectedColor="#FA8C16" selectedTextColor="#fff" multiple
							v-model="packagesSelect" :localdata="packages">
						</uni-data-checkbox>
						<view class="add">
							<image @click="add" src="../../static/index_menu_images/添加口袋按钮.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="title">推荐菜品</view>
				<view class="dishes">
					<single-dish v-for="item in details" :key="item.id" :detail="item"></single-dish>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				Option: '',
				title: ['外送到家', '到店自取', '顺丰速运'],
				categores: [{
						id: 1,
						image1: '../../static/category/全部.png',
						image2: '../../static/category/全部ac.png',
						active: 1,
						title: '全部',
					},
					{
						id: 2,
						image1: '../../static/category/收藏.png',
						image2: '../../static/category/收藏ac.png',
						active: 0,
						title: '收藏',
					},
					{
						id: 3,
						image1: '../../static/category/荤菜.png',
						image2: '../../static/category/荤菜ac.png',
						active: 0,
						title: '荤菜',
					},
					{
						id: 4,
						image1: '../../static/category/素菜.png',
						image2: '../../static/category/素菜ac.png',
						active: 0,
						title: '素菜',
					},
					{
						id: 5,
						image1: '../../static/category/口味.png',
						image2: '../../static/category/口味ac.png',
						active: 0,
						title: '口味',
					},
					{
						id: 6,
						image1: '../../static/category/饮品.png',
						image2: '../../static/category/饮品ac.png',
						active: 0,
						title: '饮品',
					},
				],
				lastIndex: 1,
				packagesSelect: [0],
				packages: [{
					text: '口袋1',
					value: 0
				}, {
					text: '口袋2',
					value: 1
				}, {
					text: '口袋3',
					value: 2
				}],

			}
		},
		onLoad: function(key) {
			this.Option = key.key;
			console.log(this.Option);
		},
		computed: {
			details() {
				return store.state.detail
			}
		},
		methods: {
			returnOldPage() {
				uni.navigateBack({
					delta: 1,
				})
			},
			active(id) {
				if (this.lastIndex != id) {
					this.categores[this.lastIndex - 1].active = 0;
					this.categores[id - 1].active = 1;
				}
				this.lastIndex = id;
			},
			add() {
				let Text = '口袋' + (this.packages.length + 1);
				let Value = this.packages.length;
				console.log(Text, Value);
				this.packages.push({
					text: Text,
					value: Value
				});
			},
			scroll(event) {
				// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
				this.scrollTop = event.detail.scrollTop; 
				//这里的detail里有多个数据，可打印出来，根据需要使用
				console.log(event.detail);
			},

		}

	}
</script>

<style lang="scss" scoped>
	.uni-status {
		width: 100%;
		height: 100%;
	}

	.uni-nav-bar {
		width: 100%;
		height: 100%;

		.navBar {
			height: 100%;
			width: 100%;
			display: flex;
			align-content: center;

			.container {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.pointer {
					height: 60rpx;

					image {
						margin: 10rpx 34rpx;
						display: block;
						width: 18rpx;
						height: 34rpx;
					}
				}

				view {
					width: auto;
					height: auto;
					flex: 1;
					display: flex;
					align-items: center;

					text {
						display: block;
						text-align: center;
						line-height: 100%;
						height: 28rpx;
						width: 100%;
						color: #FFFFFF;
						font-size: 28rpx;
						opacity: 0.9;

					}
				}

			}

		}

	}

	.top-container {
		border-radius: 24px 24px 0px 0px;
		background-color: #FFFFFF;

		.title {
			font-size: 36rpx;
			font-style: normal;
			font-weight: 500;
			margin: 64rpx 0 0 32rpx;
		}

		.top-logs {
			display: flex;
			justify-content: space-around;
		}

		.category {
			display: flex;
			justify-content: space-around;

			.single-kind {

				image {
					width: 80rpx;
				}

				.id {
					text-align: center;
					color: #BFBFBF;
					font-size: 14px;
				}
			}
		}

		.container {
			margin-top: 48rpx;


			.uni-px-5 {
				display: flex;

				.add {
					image {
						margin-top: 10rpx;
						display: block;
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
		}
	}
</style>
